<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>

<!--可无视-->
<link rel="stylesheet" type="text/css" href="images/main.css" /> 

<!--主要样式-->
<link rel="stylesheet" type="text/css" href="images/jqtransform.css" /> 

<script type="text/javascript" src="js/jquery.js"></script> 
<script type="text/javascript" src="js/jquery.jqtransform.js"></script>
<script language="javascript">
$(function(){
	$('.jqtransform').jqTransform();
});
</script>

<style type="text/css">
.demo{width:680px; margin:10px auto; color:#333; background:#fff}
.page_title{width:680px; height:30px; margin:10px auto 0 auto; text-align:center; font-weight:bold;}
form p{padding:4px; line-height:20px; clear:both}
form p label{display:block; float:left; width:100px; padding-top:2px}
</style>

</head>

<body>


<div id="main">

	<h2 class="top_title"><a href="ceshi.hajjjc.com">jqTransform：呈现更美的表单</a></h2>
	<div class="page_title">未使用jqtransform的效果：</div>

	<div class="demo">
	<form action="#" method="post">
		<p><label>用户名：</label><input type="text" /></p>
		<p><label>密码：</label><input type="password" /></p>
		<p><label>性别：</label><input type="radio" name="sex" /> 男 <input type="radio" name="sex" /> 女 </p>
		<p><label>学历：</label>
		 <select>
			<option value="1">博士</option>
			<option value="2">硕士</option>
			<option value="3">大学本科</option>
			<option value="4">大专</option>
			<option value="5">中技</option>
		 </select>
		</p>
		<p><label>短信订阅：</label><input type="checkbox" /> 开通短信订阅功能</p>
		<p><label>备注：</label>
		<textarea name="note" rows="6" cols="40"></textarea>
		</p>
		<p><label>&nbsp;</label><input type="submit" value="提 交" /></p>
	</form>
	</div>

	<div class="page_title">使用jqtransform后的效果：</div>
	<div class="demo">
	<form class="jqtransform" action="#" method="post">
		<p><label>用户名：</label><input type="text" /></p>
		<p><label>密码：</label><input type="password" /></p>
		<p><label>性别：</label><input type="radio" name="sex" /> <label style="width:auto">男</label> <input type="radio" name="sex" /> <label style="width:auto">女</label> </p>
		<p><label>学历：</label>
		 <select>
			<option value="1">博士</option>
			<option value="2">硕士</option>
			<option value="3">大学本科</option>
			<option value="4">大专</option>
			<option value="5">中技</option>
		 </select>
		</p>
		<p><label>短信订阅：</label><input type="checkbox" />  <label>开通短信订阅功能</label></p>
		<p><label>备注：</label>
		<textarea name="note" rows="6" cols="40"></textarea>
		</p>
		<p><label>&nbsp;</label><input type="submit" value="提交" /> <input type="reset" value="重置" /></p>
	</form>
	</div>

</div>


</body>
</html>
